<script setup>
	import { ref } from "vue"
	import { getStatusBarHeight, getTitleBarHeight, getNavBarHeight } from "@/utils/system.js"
	defineProps({
		title: {
			type: String,
			default: "壁纸"
		}
	})
</script>

<template>
	<view class="custom-nav-bar">
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{height:getStatusBarHeight()+'px'}"></view>
		<view class="title-bar" :style="{height:getTitleBarHeight()+'px'}">
			<view class="title">{{title}}</view>
			<navigator class="search" url="/pages/search/search">
				<uni-icons class="icon" type="search" size="18" color="#888"></uni-icons>
				<text class="text">搜索</text>
			</navigator>
		</view>
	</view>
	<!-- 填充占位 -->
	<view class="fill" :style="{height:getNavBarHeight()+'px'}"></view>
</template>

<style lang="scss" scoped>
	.custom-nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;
		background:
			linear-gradient(to bottom, transparent, #fff 400rpx),
			linear-gradient(to right, #beecd8 20%, #f4e2d8);
	}

	.title-bar {
		display: flex;
		align-items: center;
		padding: 0 30rpx;

		.title {
			font-size: 36rpx;
			font-weight: 600;
			color: $text-color-1;
		}

		.search {
			width: 220rpx;
			height: 50rpx;
			border-radius: 60rpx;
			background-color: rgba(255, 255, 255, 0.4);
			border: 1px solid #fff;
			margin-left: 30rpx;
			color: #999;
			font-size: 28rpx;
			display: flex;
			align-items: center;

			.icon {
				margin-left: 5rpx;
			}

			.text {
				margin-left: 10rpx;
			}
		}
	}
</style>